<template>
  <tbc-dialog
      title="编辑订单" ref="dialogViable"  @confirm="formSubmit">
    <el-form label-width="80px" label-position="top" class="compact">
      <el-form-item label="订单金额">
        <el-input v-model="form.order_amount" :disabled="isPaid"></el-input>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="收货人姓名">
            <el-input v-model="form.contact" class="input-with-select">
              <template #append>
                <el-select v-model="form.gender" style="width:80px">
                  <el-option label="先生" :value="1"></el-option>
                  <el-option label="女士" :value="2"></el-option>
                  <el-option label="保密" :value="3"></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item>
            <div><label class="el-form-item__label">联系电话</label></div>
            <el-input v-model="form.contact_number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item>
            <div><label class="el-form-item__label">地区</label></div>
            <tbc-selector
                v-model="form.region"
                style="width:100%"
                level="3"
                api="/basic.region" ref="region"></tbc-selector>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="详细地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item label="门牌号">
        <el-input v-model="form.house_number"></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" :rows="4" v-model="form.seller_remark"></el-input>
      </el-form-item>
    </el-form>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, Ref, toRefs} from 'vue'
import useOrder from '../api/order'
import {ElMessage} from "element-plus";
import http from '@/plugin/http'

export default defineComponent({

  name: 'order-modify',

  emits: ['success'],

  setup(prop, {emit}) {
    const order = useOrder()
    const dialogViable: Ref = ref(null)
    const state = reactive({
      form: {
        order_sn: '', address: '', contact: '', gender: 1, contact_number: '', region: [],
        province: '', city: '', district: '', house_number: '', order_amount: 0, seller_remark: '',
      },
      region: [],
      isPaid: false
    })

    const show = (data: Record<string, string | number>) => {
      dialogViable.value.show()
      for (let i in state.form) {
        if (typeof data[i] !== 'undefined') state.form[i] = data[i]
      }
      state.isPaid = data.pay_time !== '0000-00-00 00:00:00'
      getOrderInfo()
    }

    const getOrderInfo = async () => {
      const res = await order.getInfo(state.form.order_sn)
      if (res.data.code !== 0) return
      let address = res.data.data.address.data.field
      for (let i in state.form) {
        if (typeof address[i] !== 'undefined') state.form[i] = address[i]
      }
      let region = [address.province, address.city, address.district];
      (state.region as string[]) = region;
      // if (this.form.region.join(',') === this.region.join(',')) return
      (state.form.region as string[]) = region
    }


    const formSubmit = async () => {
      let region: string[] = JSON.parse(JSON.stringify(state.form.region))
      state.form.province = region.shift() || '';
      state.form.city = region.shift() || '';
      state.form.district = region.shift() || '';
      const res = await http.post('/order/edit', state.form)
      if (res.data.code !== 0) return ElMessage.error(res.data.message);
      ElMessage.success(res.data.message)
      emit('success')
    }


    return {
      ...toRefs(state),
      dialogViable,
      show,
      formSubmit
    }
  }
})
</script>